<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标准/普通流(normal flow)</title>
    <!-- 
    CSS中的normal flow（普通流）是指元素在没有进行定位或浮动的情况下按照其在文档中的顺序进行布局的方式。
    normal flow相关的常见属性和特性： 
      1. block-level元素：块级元素按照从上到下的顺序垂直堆叠，每个元素占据一行。 
      2. inline元素：行内元素按照从左到右的顺序水平排列，可以在同一行显示多个元素。 
      3. inline-block元素：行内块级元素结合了块级元素和行内元素的特性，可以在同一行显示，但可以设置宽度和高度等属性。 
      4. float：浮动元素会脱离正常的文档流，可以使元素在页面上左浮动或右浮动。 
      5. clear：清除浮动，避免浮动元素导致父元素高度塌陷的问题。
   -->
    <style>
      .container {
        display: inline-block;
        position: static;
        width: 200px;
        height: 200px;
        background-color: red;

        left: 0;
        top: 100px;
        bottom: 200px;
        right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="normal-flow">normal-flow</div>
    <span>normal-flow-span</span>
    <img src="../../images/gouwujie01.jpg" alt="" />
    <div class="container"></div>
  </body>
</html>
